<template>
	<div class="login-page">
		<el-row type="flex" justify="space-around" class="vertical-middle">
			<el-col :lg="12" :xl="10">
				<el-card class="session-card" :body-style="cardStyle">
					<div class="session-sidebox hidden-sm-and-down">
						<div class="session-sidebox__container">
							<div class="session-sidebox__header">
								<div class="session-sidebox__logo">
									<h1 class="session-sidebox__title">Teamwork</h1>
									<!--<h2 class="session-sidebox__subtitle">协同 高效 共享</h2>-->
								</div>
							</div>
						</div>
					</div>
					<div class="session-form">
						<div class="session-form__container">
							<header class="session-form__header">
								<h1 class="session-form__title">登录</h1>
							</header>
							<transition>
								<el-alert v-show="info" class="error" type="error" :title="info" @close="resetSession" show-icon></el-alert>
							</transition>
							<el-form>
								<el-form-item prop="username">
									<el-input v-model="username" placeholder="请输入用户名">
										<!--<template v-slot:prefix>-->
										<!--	<i class="el-icon-user-solid"></i>-->
										<!--</template>-->
									</el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input v-model="password" placeholder="请输入密码" show-password>
										<!--<template v-slot:prefix>-->
										<!--	<i class="el-icon-lock"></i>-->
										<!--</template>-->
									</el-input>
								</el-form-item>
								<el-form-item>
									<el-checkbox v-model="rememberMe">记住我</el-checkbox>
								</el-form-item>
								<el-form-item>
									<el-button class="btn-block" type="primary" @click="login">登录</el-button>
								</el-form-item>
							</el-form>
							<p style="text-align: center">用户名：admin 密码：admin</p>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	name: "Login",
	data() {
		return {
			cardStyle: {
				padding: "0",
				display: "flex",
				height: "575px",
			},
			username: "",
			password: "",
			info: "",
			rememberMe: false
		}
	},
	methods: {
		login() {
			if (this.username == "admin" && this.password == "admin") {
				sessionStorage.setItem("isAuth", true);
				this.info=""
				if (this.$route.query.redirect) {
					let redirect = this.$route.query.redirect;
					this.$router.replace(redirect)
				} else  {
					this. $router.replace("/")
				}
			} else {
				this.username = "";
				this.password = "";
				this.info = "用户名或密码错误"
			}
		},
		resetSession() {
			// this.username = "";
			this.password = "";
			this.info = "";
		}
	}
}
</script>

<style lang="scss" scoped>
.login-page {
	height: 100%;
	width: 100%;
	background-color: #eee;

	.vertical-middle {
		position: relative;
		top: 50%;
		transform: translateY(-50%);

		.session-card {
			border-radius: 6px;

			.session-sidebox {
				width: 50%;
				text-align: center;
				position: relative;
				background: linear-gradient(0deg, #167ffc 0%, #619afa 100%);
				//background: #167ffc url("~@/assets/img/logo_bg_01.jpg") no-repeat center;

				&::before {
					content: "";
					position: absolute;
					background: url("~@/assets/img/left_top.png") no-repeat 0 0;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
				}

				.session-sidebox__container {
					padding: 65px;

					.session-sidebox__header {
						color: #ffffff;
					}

					.session-sidebox__title {
						text-align: left;
						font-size: 2.5em;
					}

					.session-sidebox__subtitle {
						text-align: left;
					}
				}

				&::after {
					content: "";
					position: absolute;
					background: url("~@/assets/img/left_bottom.png") no-repeat right bottom;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
				}
			}

			.session-form {
				width: 50%;

				.session-form__container {
					padding: 65px 75px;

					.session-form__header {
						line-height: 1.5;

						.session-form__title {
							text-align: center;
						}
					}
				}

				.error {
					margin-bottom: 22px;
				}

			}
		}
	}
}
</style>
